---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_splotch-starfield.json';
---

<Layout title={title}>
  <section class="container">
    <two5-display id="mydisplay" class="display">
      <two5-texture-store id="texstore" src="/lookbook/assets/textures.json">
        <two5-post-processing>
          <two5-stage2d
            id="mystage"
            projection-type="parallax"
            fit="contain"
            width="1000"
            height="1000"
            distance-to-projection-plane="66"
            far="1000"></two5-stage2d>
          <two5-afterimage-pass damp="0.8"></two5-afterimage-pass>
          <two5-unreal-bloom-pass strength="4.9" radius="0.4" threshold="0.15"></two5-unreal-bloom-pass>
        </two5-post-processing>
      </two5-texture-store>
    </two5-display>
  </section>
</Layout>

<style>
  :global(.lil-gui) :global(option) {
    color: #555;
  }

  .container {
    width: 100vw;
    /* width: 100svw; */
    height: 100vh;
    /* height: 100svh; */
    max-width: none;
  }

  .display {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(27, 17, 64, 1) 0%, rgba(0, 0, 0, 1) 100%);
  }
</style>

<script>
  import {Display, TextureStore} from '@spearwolf/twopoint5d';
  import {OnMaterial, Starfield, type OnMaterialParams} from '@spearwolf/twopoint5d-demos';
  import {DisplayElement, Stage2DElement, TextureStoreElement, whenDefined} from '@spearwolf/twopoint5d-elements';
  import '@spearwolf/twopoint5d-elements/two5-afterimage-pass.js';
  import '@spearwolf/twopoint5d-elements/two5-display.js';
  import '@spearwolf/twopoint5d-elements/two5-glitch-pass.js';
  import '@spearwolf/twopoint5d-elements/two5-post-processing.js';
  import '@spearwolf/twopoint5d-elements/two5-stage2d.js';
  import '@spearwolf/twopoint5d-elements/two5-texture-store.js';
  import '@spearwolf/twopoint5d-elements/two5-unreal-bloom-pass.js';
  import GUI from 'lil-gui';
  import {Color} from 'three';

  // -----------------------------

  const [textureStore, mystage, display] = (await Promise.all([
    whenDefined(document.getElementById('texstore')).then((el) => (el as TextureStoreElement).store),
    whenDefined(document.getElementById('mystage')),
    whenDefined(document.getElementById('mydisplay')).then((el) => (el as DisplayElement).display),
  ])) as [TextureStore, Stage2DElement, Display];

  // -----------------------------

  const starfield = new Starfield(textureStore, mystage.stage2d, 3000, 'splotchs');

  starfield.setStarBox(1000, 1000, 1000);
  starfield.setStarBoxCenter(500, 500, 500);
  starfield.setNearFar(0, 1000);
  starfield.starSize = 5;
  starfield.setMinMaxSizeScale(0.05, 0.15); // 0.27, 0.01);
  starfield.starSpeed = 50;
  starfield.cameraLineOfSightEscape = 5; // 10;
  starfield.rotationSpeed = 0.05;

  starfield.setBaseColors([0x001219, 0x005f73, 0x0a9396, 0x94d2bd, 0xe9d8a6, 0xee9b00, 0xca6702, 0xbb3e03, 0xae2012, 0x9b2226]);

  starfield.on(OnMaterial, ({material}: OnMaterialParams) => {
    console.log('starfield.material', material);

    material.logShadersToConsole = true;

    material.tintColorFar = new Color(0x101030);
    material.tintColorNear = new Color(0xffffff);
  });

  display.on('resize', ({width, height}) => {
    starfield.setScreenResolution(width, height);
  });

  console.log('starfield', starfield);

  // -----------------------------

  const gui = new GUI({title: 'splotch-starfield'});

  const starfieldFolder = gui.addFolder('starfield');

  starfieldFolder.add(starfield, 'starSpeed', -300, 300, 1);

  const starfieldSettings = {
    minSize: starfield.minSizeScale,
    maxSize: starfield.maxSizeScale,
  };
  starfieldFolder.add(starfieldSettings, 'minSize', 0.01, 1, 0.01).onChange((value: number) => {
    starfield.setMinMaxSizeScale(value, starfieldSettings.maxSize);
  });
  starfieldFolder.add(starfieldSettings, 'maxSize', 0.01, 5, 0.01).onChange((value: number) => {
    starfield.setMinMaxSizeScale(starfieldSettings.minSize, value);
  });

  starfieldFolder.add(mystage, 'distanceToProjectionPlane', 0, 1000, 1).name('camDist');
  starfieldFolder.add(starfield, 'cameraLineOfSightEscape', 0, 10, 0.1).name('camLOFEsc');
  starfieldFolder.add(starfield, 'rotationSpeed', -1, 1, 0.01).name('rotate');

  const unrealBloomFolder = gui.addFolder('unreal bloom');
  const unrealBloom = document.querySelector('two5-unreal-bloom-pass');

  unrealBloomFolder.add(unrealBloom, 'strength', 0, 10, 0.01);
  unrealBloomFolder.add(unrealBloom, 'radius', -5, 10, 0.01);
  unrealBloomFolder.add(unrealBloom, 'threshold', 0, 1, 0.01);
  unrealBloomFolder.add(unrealBloom, 'disabled');
</script>
